<script setup>
import { transformTimeStamp, textHandle } from '@/utils/dialog-utils'

const props = defineProps({
  message: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['submit', 'cancelPin', 'resetPinMsgList', 'removePinMsg'])

defineExpose({
  open,
})
const visible = ref(false)
const msg = ref()
const timeStamp = ref()
const textContent = ref()
const createUser = ref()
const userId = ref()

watch(
  () => props.message,
  (v) => {
    if (v) {
      nextTick(() => {
        msg.value = v
        timeStamp.value = transformTimeStamp(v.createTime)
        createUser.value = v.createUser
        userId.value = v.userId
        textContent.value = v?.content?.split(/\n/)
      })
    }
  }
)

function submit() {
  emit('removePinMsg', msg.value)
  visible.value = false
}

function open() {
  visible.value = true
}

function close() {
  visible.value = false
}
</script>

<template>
  <TaskChatDialog v-model="visible" title="取消Pin？消息将从所有会话成员的Pin列表中移除" width="520" @close="close">
    <div class="cancel-pin">
      <div
        class="cancel-pin-text"
        v-html="textHandle(item, index, props.options)"
        v-for="(item, index) in textContent"
        :key="index"></div>
      <span class="cancel-pin-date">{{ createUser }} 发送于 {{ timeStamp }}</span>
    </div>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit">移除</el-button>
    </template>
  </TaskChatDialog>
</template>

<style scoped lang="scss">
.cancel-pin {
  width: 100%;
  height: 300px;
  padding: 12px;
  border: 1px solid #d4d8e0;
  border-radius: 12px;
  overflow: hidden;
  .cancel-pin-text {
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
    max-width: 100%;
  }
  .cancel-pin-date {
    margin-top: 20px;
    font-size: 12px;
  }
}
</style>
